import React, { ReactNode } from 'react';
import { Row, Col, Space, Table } from 'antd';
import './TableBox.less';
import { TablePaginationConfig } from 'antd/lib/table/Table';

interface IProps {
    titleNode: string | ReactNode;
    buttonNode?: ReactNode;
    dataSource: any;
    columns: any;
    pagination?: false | TablePaginationConfig | undefined;
    scroll?:
        | ({
              x?: string | number | true | undefined;
              y?: string | number | undefined;
          } & {
              scrollToFirstRowOnChange?: boolean | undefined;
          })
        | undefined;
    rowKey?: string;
    loading?: boolean;
    onChange?: (pagination: any) => void;
}

const TableBox = (props: IProps) => {
    return (
        <Space className="tablebox" direction="vertical" size="middle">
            <Row justify="space-between" align="middle">
                <Col>
                    <Space align="center">{props.titleNode}</Space>
                </Col>
                <Col>
                    <Space align="center">{props.buttonNode}</Space>
                </Col>
            </Row>
            <Table
                onChange={props.onChange}
                loading={props.loading}
                rowKey={props.rowKey}
                dataSource={props.dataSource}
                columns={props.columns}
                pagination={props.pagination}
                scroll={props.scroll}
            />
        </Space>
    );
};

export default TableBox;
